<template>
  <el-row>
    <el-table :data="candidateTaskList" fit>
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <!-- 应该用不到 -->
      <!-- <el-table-column align="center" prop="taskId" label="任务编号" width="100"></el-table-column> -->
      <el-table-column align="center" prop="formflowName" label="流程名称"></el-table-column>
      <el-table-column align="center" prop="taskName" label="当前节点"></el-table-column>
      <!-- <el-table-column align="center" prop="procDefVersion" label="流程版本" width="100">
        <template #default="{ row }">
          <el-tag type="primary">V{{ row.procDefVersion }}</el-tag>
        </template>
</el-table-column> -->
      <el-table-column align="center" prop="startUserName" label="流程发起人"></el-table-column>
      <el-table-column align="center" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.assigneeName === null ? 'primary' : 'success'">{{ row.assigneeName === null ? '未认领' :
            '已认领'
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="接收时间" width="200"></el-table-column>
      <el-table-column align="center" prop="" label="操作">
        <template #default="{ row }">

          <el-button type="primary" plain size="small" @click="show(row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
        layout="sizes,prev, pager, next" :total="pageInfo.total" :page-sizes="[10, 30, 50]" @change="changePage">
      </el-pagination>
    </div>
  </el-row>

  <el-drawer title="流程信息" v-model="isProcessInstance" size="80%">
    <el-row>
      <el-col :span="12">
        <el-row style="flex-direction: column;">
          <div><el-text tag="b" size="large" style="color: #303133">流程审批</el-text></div>
          <div style="margin: 20px 0;">

            <el-button type="primary" @click="claim(row)">领取任务</el-button>
          </div>
        </el-row>
        <el-row style="display: flex; flex-direction: column;">
          <el-descriptions :column="1" size="default" title="发起流程信息">
            <el-descriptions-item v-for="(key, index) in Object.keys(processStartFormData)" :key="index"
              :label="key + '：'" label-align="right" label-class-name="description-label">{{
                processStartFormData[key] }}</el-descriptions-item>
          </el-descriptions>
          <el-empty v-if="Object.keys(processStartFormData).length < 1" description="未查询到数据" :image-size="100" />
        </el-row>
        <el-row>
          <div><el-text tag="b" size="large" style="color: #303133">流程图</el-text></div>
          <BpmnViewer :flowData="flowData" :processInstance="processInstance"></BpmnViewer>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-text tag="b" size="large" style="color: #303133">审批流程信息</el-text>
        <el-timeline style="margin-top: 20px;">
          <el-timeline-item v-for="(activity, index) in processInstance.slice(0, -1)" :key="index" icon="MoreFilled"
            type="success" hide-timestamp>
            {{ activity.taskName }}
            <el-card shadow="hover" style="width: 80%;">
              <el-text>
                <el-icon>
                  <UserFilled />
                </el-icon>
                审批人员：{{ activity.assigneeName }}
                <el-tag type="primary">
                  {{ activity.assigneeDeptName }}
                </el-tag>
              </el-text><br>
              <el-text>
                <el-icon>
                  <Comment :color="['1', '4', '5', 'comment'].includes(activity.comment?.type) ? '' : '#F8525E'" />
                </el-icon>
                {{ comment[activity.comment?.type] || "审批意见" }}：
                {{ activity.comment?.comment }}</el-text><br>
              <el-text>
                <el-icon>
                  <Stopwatch />
                </el-icon>
                消耗时长：{{ activity.duration }}</el-text><br>
              <el-text>
                <el-icon>
                  <Timer />
                </el-icon>
                开始时间：{{ activity.createTime }}</el-text><br>
              <el-text>
                <el-icon>
                  <Timer />
                </el-icon>
                结束时间：{{ activity.finishTime }}</el-text>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(activity, index) in processInstance.slice(-1,)" :key="index" icon="SemiSelect"
            type="primary" hide-timestamp>
            {{ activity.taskName }}
            <el-card shadow="hover" style="width: 80%;">
              <el-text>
                <el-icon>
                  <UserFilled />
                </el-icon>
                审请人员：{{ activity.assigneeName }}
                <el-tag type="primary">
                  {{ activity.assigneeDeptName }}
                </el-tag>
              </el-text><br>
              <el-text>
                <el-icon>
                  <Timer />
                </el-icon>
                开始时间：{{ activity.createTime }}</el-text><br>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup>
import { getCandidateTask, getrecords, claimCandidateTask } from '@/api/flowable/task'
import { getInstanceVariables } from '@/api/flowable/instance'
import { getProcessXmlAndNode } from '@/api/flowable/defination'
import { comment } from '@/constants/flowable'
import BpmnViewer from './BpmnViewer.vue';
import { ref, watch } from 'vue'
// import { useUserStore } from '@/stores';

// const userStore = useUserStore()
// const currentUser = userStore.userInfo

const candidateTaskList = ref([])
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
async function doGetCandidateTask() {
  await getCandidateTask(pageInfo.value).then(res => {
    console.log(res.data.data)
    candidateTaskList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
doGetCandidateTask()
async function changePage(page) {
  pageInfo.value.page = page
  await doGetCandidateTask()
}
// const completeTaskInfo = ref({
//   taskId: '',
//   variables: '',
//   instanceId: '',
//   comment: ''
// })
async function claim() {
  await claimCandidateTask(taskInfo.value.taskId).then(res => {
    ElMessage.success(res.data.data)
    doGetCandidateTask()
  })
  isProcessInstance.value = false
  flag.value++
}

const taskInfo = ref()
const isProcessInstance = ref(false)
const processInstance = ref([])
const processStartFormData = ref({})
const flowData = ref('')

async function show(row) {
  console.log(row)
  taskInfo.value = row
  isProcessInstance.value = true
  await getrecords(row.procInsId).then(res => {
    console.log('processIntance', res)
    processInstance.value = res.data.data
  })
  await getInstanceVariables(row.procInsId).then(res => {
    // console.log(res)
    processStartFormData.value = res.data.data
  })
  await getProcessXmlAndNode(row.deployId, row.procInsId).then(res => {
    // console.log('xmlAndNode:', res.data.data)
    flowData.value = res.data.data
  })
}
const emit = defineEmits(['setCandidateCount'])
watch(candidateTaskList, () => {
  emit('setCandidateCount', pageInfo.value.total)
})
// 用于子组件刷新
const flag = defineModel("flag")
watch(flag, () => {
  doGetCandidateTask()
})
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 8px;
}

:deep(.description-label) {
  color: var(--el-color-primary);
  margin-left: 16px;
  background: var(--el-color-success-light-9) !important;
}

.pagination-container {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;

}
</style>